<template>
  <div id="detailContrainer" class="slide-enter-active">
    <Header title="影片详情">
      <i class="iconfont icon-right" @touchstart="handleToBack"></i>
    </Header>
    <loading v-if="isLoading"></loading>
    <div  v-else  id="content" class="contentDetail">
      <div class="detail_list">
        <div class="detail_list_bg" :style="{ 'background-image' : 'url('+ detailMovie.img.replace(/w\.h/,'148.208') +')' }"></div>
        <div class="detail_list_filter"></div>
        <div class="detail_list_content">
          <div class="detail_list_img">
              <!-- <img :src="detailMovie.img | setWH('128.180')" /> -->
            <img :src="detailMovie.img" />
          </div>
          <div class="detail_list_info">
            	<h2>{{ detailMovie.nm }}</h2>
						<p>{{ detailMovie.enm }}</p>
						<p>{{ detailMovie.sc }}</p>
						<p>{{ detailMovie.cat }}</p>
						<p>{{ detailMovie.src }} / {{ detailMovie.dur }}分钟</p>
						<p>{{ detailMovie.pubDesc }}</p>
          </div>
        </div>
      </div>
      <div class="detail_intro">
        <p>    {{ detailMovie.dra }}</p>
      </div>
      <div class="detail_player swiper-container" ref="detail_player">
        <ul class="swiper-wrapper">
          <li v-for="(item,index) in detailMovie.photos" :key="index" class="swiper-slide">
            <div>
              <!-- <img :src="item.img | setWH('128.180')" /> -->
            <img :src="item.img" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "components/Header";
// 2.导入定义的类名
import { getdetaillist,detailMovie } from "network/detail";
import loading from "components/Loading";

export default {
  name: "DetailPage",
  //接收传递过来的路由参数 详情页
  props: ["movieId"],
  data() {
    return {
      //id参数
      id: this.movieId,
      // 数据源
        detailMovie : {},
        // loading加载
      isLoading : true,
     // 3.电影的详情页基本信息
      detailist: {},
    };
  },
  components: {
    Header,
    loading
  },
  mounted() {
    this.getdetaillist(this.id);
  },
  methods: {
    //点击返回上一级
    handleToBack() {
      this.$router.back();
    },

    //根据id 获取数据
    getdetaillist(id) {
      getdetaillist(id).then((res) => {
           /* var msg = res.msg;
            if( msg === 'ok' ){
        4.获取电影的详情页信息 通过new一个实例 传递 对应的字段进去 对象内部通过具体的属性 得到值 
              // this.detailist = new detailMovie(
              //    detailMovie 
              //    );
              //   this.detailist 就拥有了 nm这些值了 

              //有顺序的 先让其渲染组件才去else
                this.isLoading = false;
                this.detailMovie = res.data.detailMovie;
                // Swiper插件轮播图 具体看官网
                    this.$nextTick(()=>{
                    new Swiper(this.$refs.detail_player , {
                        slidesPerView : 'auto',
                        freeMode : true,
                        freeModeSticky: true
                    });
                });
            }*/
      });
    },
  },
};
</script>

<style scoped>
#detailContrainer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: 100%;
  background: white;
}
#detailContrainer.slide-enter-active {
  animation: 0.3s slideMove;
}
@keyframes slideMove {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
#content.contentDetail {
  display: block;
  margin-bottom: 0;
}
#content .detail_list {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.detail_list .detail_list_bg {
  width: 100%;
  height: 100%;
  background: 0 40%;
  filter: blur(20px);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.detail_list .detail_list_filter {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #40454d;
  opacity: 0.55;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.detail_list .detail_list_content {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.detail_list .detail_list_img {
  width: 108px;
  height: 150px;
  border: solid 1px #f0f2f3;
  margin: 20px;
}
.detail_list .detail_list_img img {
  width: 100%;
  height: 100%;
}
.detail_list .detail_list_info {
  margin-top: 20px;
}
.detail_list .detail_list_info h2 {
  font-size: 20px;
  color: white;
  font-weight: normal;
  line-height: 40px;
}
.detail_list .detail_list_info p {
  color: white;
  line-height: 20px;
  font-size: 14px;
  color: #ccc;
}
#content .detail_intro {
  padding: 10px;
}
#content .detail_player {
  margin: 20px;
}
.detail_player .swiper-slide {
  width: 70px;
  margin-right: 20px;
  text-align: center;
  font-size: 14px;
}
.detail_player .swiper-slide img {
  width: 100%;
  margin-bottom: 5px;
}
.detail_player .swiper-slide p:nth-of-type(2) {
  color: #999;
}
</style>
